<template>
  <div class="home">
      <h1>我是内容页</h1>
      <div>  show the store: {{ $store.state.version }} </div>
      <button @click="nextOne">下一篇文章</button>
      <button @click="goBack">后退</button>
  </div>
</template>

<script>

export default {
  name: 'Detail',
  data(){
    return {
      id:888
    }
  },      
  created(){
    console.log('详情页 created')
  },  
  mounted(){
    // this.$route 会得到所有的当前的路由信息
    // 如果跳转的时候传递的params参数在 路由配置当中没有声明 那么仅仅会在跳转的时候传递
    // 单独打开会丢失
    console.log('$route in detail',this.$route);
    // 获取详情内容
    this.getContent();
  },
  methods:{
    getContent(){
      console.log('开始去获取详情页的内容')
    },
    nextOne(){
      this.id++;
      // 下面的正常跳转 跳转前和跳转后的路由都是同一个 只是参数发生变化 这种情况之下组件不会销毁和重新创建
      // 意味着 created mounted这些挂载阶段的生命周期不会重复执行
      // 所以 原来在挂载阶段去执行获取内容的请求 需要再 beforeRouteUpdate这个路由守卫中执行
      // 或者通过 watch 监听 $route对象的变化 来判断是否需要重新执行请求
      this.$router.push({name:'detail',params:{acid: this.id}})
    },
    goBack(){
      this.$router.back();
    }
  },
  watch:{
    '$route'(nv,ov){
        console.log('我也可以监听 路由的变化');
    }
  },
  beforeRouteUpdate(to,from,next){
    this.getContent()// 一般在路由参数发生了变化时候可以在这个地方重新去获取内容
     // 这个钩子是发生在路由不变，仅仅是路由参数变化
     next()
  },
  // 组件内的守卫  
  beforeRouteEnter(to,from,next){
      console.log('详情页也的 beforeRouterEnter')
      console.log('to in detail',to)
      console.log('from in detail',from)
      const { name } = from;
      if(name==='abc') return next();
      next()
  }

}
</script>
